<template>
  <div class="rf-engraving-content">
    <div class="rf-engraving-form">
      <div class="rf-engraving-messagebox">
        <div class="form-textbox">
          <input
            type="text"
            class="form-textbox-input"
            ref="ChangeStyle"
            @click="SpanUp"
            @keyup="show('anxia')"
            id="ChangeStyle"
          />
          <span class="Once-focus" id="focusOne" ref="remainStyle">你的镌刻信息</span>
          <div class="form-message-wrapper" id="Ifdisplay">
            <span class="icon">
            <svg t="1665473988614" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2533" width="17" height="17"><path d="M918.795922 356.854687c-21.798121-51.476314-52.909055-97.631021-92.514092-137.236058-39.605037-39.605037-85.862083-70.818309-137.236058-92.514092C635.727364 104.590046 579.236458 93.128123 520.903458 93.128123s-114.823906 11.461923-168.142315 33.976414c-51.476314 21.798121-97.631021 52.909055-137.236058 92.514092s-70.818309 85.862083-92.514092 137.236058C100.496502 410.173096 89.034579 466.664002 89.034579 524.997002s11.461923 114.823906 33.976414 168.142315c21.798121 51.476314 52.909055 97.631021 92.514092 137.236058 39.605037 39.605037 85.862083 70.818309 137.236058 92.514092 53.21607 22.514491 109.809314 33.976414 168.142315 33.976414s114.823906-11.461923 168.142315-33.976414c51.476314-21.798121 97.631021-52.909055 137.236058-92.514092 39.605037-39.605037 70.818309-85.862083 92.514092-137.236058 22.514491-53.21607 33.976414-109.809314 33.976414-168.142315S941.310414 410.173096 918.795922 356.854687zM520.903458 911.836898c-213.273636 0-386.839896-173.56626-386.839896-386.839896s173.56626-386.839896 386.839896-386.839896 386.839896 173.56626 386.839896 386.839896S734.177094 911.836898 520.903458 911.836898zM520.903458 637.364781c12.38297 0 22.514491-10.131521 22.514491-22.514491L543.417949 344.574056c0-12.38297-10.131521-22.514491-22.514491-22.514491s-22.514491 10.131521-22.514491 22.514491l0 270.378573C498.388967 627.23326 508.520488 637.364781 520.903458 637.364781zM520.903458 705.931641m-30.701579 0a30 30 0 1 0 61.403158 0 30 30 0 1 0-61.403158 0Z" p-id="2534" fill="#d81e06"></path></svg>
            </span>
           <span class="form-message">可用空间无法容纳你的信息</span>
          </div>
          <div class="form-textbox-righticon">
            <button class="form-icons" id="buttonlink" @click="show('button')">
              <span>
                <svg
                  t="1664874985135"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="1549"
                  width="13"
                  height="13"
                >
                  <path
                    d="M512 1024C229.248 1024 0 794.752 0 512S229.248 0 512 0s512 229.248 512 512-229.248 512-512 512z m0-572.330667L300.629333 240.213333a42.538667 42.538667 0 0 0-60.16 0.213334 42.410667 42.410667 0 0 0-0.213333 60.16L451.669333 512 240.213333 723.370667a42.538667 42.538667 0 0 0 0.213334 60.16 42.410667 42.410667 0 0 0 60.16 0.213333L512 572.330667l211.370667 211.413333a42.538667 42.538667 0 0 0 60.16-0.213333 42.410667 42.410667 0 0 0 0.213333-60.16L572.330667 512l211.413333-211.370667a42.538667 42.538667 0 0 0-0.213333-60.16 42.410667 42.410667 0 0 0-60.16-0.213333L512 451.669333z"
                    fill="#77777c"
                    p-id="1550"
                  ></path>
                </svg>
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import bus from "../../../../../../bus/index";
export default {
  data() {
    return {
    ArrayValue:[],
    // 接收现在输入框输入的值
    currentValue:[],
    ExisValue:[],
    Pandid:false,
    InputStyle:false,
    thirdValue:false,
    Hidepreserve:''
    }
  },
  created() {
    // 接收Context传递的数据 
    const that =this
    bus.$on("Changefix", (data) => {
      if (data = true) {
        // 一开始不展示
        var ButtonID = document.getElementById("buttonlink");
        var IfHidden =document.getElementById('Ifdisplay')
        ButtonID.style.display = "none";
        IfHidden.style.display = "none";
        window.addEventListener("click", this.SpanUp);
      }
    });
    bus.$on('Nowvalue'),function(data){
     that.ExisValue=data
    }
    // 接收HideFrist
    bus.$on("Cancel", (data) => {
      if (data = true) {
        window.removeEventListener("click", this.SpanUp);
      }
    });
    // 接收Sceond数据
    bus.$on('ArrayValue',(data)=>{
      that.ArrayValue=data
    })
    // 接收之后就出发show函数
    bus.$on('Clicktouch',(data)=>{
      if (data=true) {
        this.show()
      }
    })
    // 接收third的数据
    bus.$on('CancelMessage',(data)=>{
      if (data==false) {
        that.show('button')
      }
     
    }) 
    // 接收Hidepage传递进来的数据
    bus.$on('Hidepreserve',(data)=>{
        this.Hidepreserve=data
        this.show('Hidepreserve')
      })
  },
  methods: {
    SpanUp(e) {
      var SpanClass = document.getElementById("focusOne");
      var InputClass = this.$refs["ChangeStyle"];
      var InputValue =document.getElementById("ChangeStyle").value;
      var ButtonID = document.getElementById("buttonlink");
      // 判断焦点是否是在input输入框
      if (InputClass == document.activeElement) {
        // 阻止事件冒泡的发生
        e.stopPropagation();
        // 焦点存在启动样式
        if (SpanClass.classList.contains("Once-focus")) {
          SpanClass.classList.remove("Once-focus");
          SpanClass.classList.add("third-focus");
        } 
        else if (SpanClass.classList.contains("second-focus")) {
          SpanClass.classList.remove("second-focus");
          SpanClass.classList.add("third-focus");
        }
        if (InputValue !='') {
          ButtonID.style.display = "block";
        }else{
           ButtonID.style.display = "none";
        }
      } 
      // 输入框没有内容，且焦点不在输入框
      if (InputClass != document.activeElement  && InputValue == '') {
         SpanClass.classList.remove("third-focus");
        SpanClass.classList.add("second-focus");
      }
      // 焦点不在输入框，且输入框有值
      if (InputClass != document.activeElement && InputValue != '') {
        SpanClass.classList.remove("second-focus");
        SpanClass.classList.add("third-focus");
      }
       // 焦点不在输入框，输入框有值 ，且输入框的值超过了
      if (InputClass != document.activeElement && InputValue != '' && this.InputStyle == true) {
        InputClass.style.backgroundColor='#fff2f4';
        InputClass.style.borderColor='#e51314'
      }else{
         InputClass.style.backgroundColor ='#fff'
         InputClass.style.borderColor='#8d8d91'
      }
      // 焦点在输入框，且输入框有值
    },
    // 键盘按下触发函数
    show(vlaue) {
      var Classkeep =document.getElementById('focusOne');
      var InputClass = this.$refs["ChangeStyle"];
      var InputValue =document.getElementById("ChangeStyle").value;
      // 去除空格
      var str = InputValue.replace(/^\s*/g, "");
      var ButtonID = document.getElementById("buttonlink");
      var IfHidden =document.getElementById('Ifdisplay')
      // 判断输入框的值的长度是否大于14,传值给主页面,并且转变样式
      if (vlaue=='Hidepreserve') {
        document.getElementById("ChangeStyle").value=this.Hidepreserve
      }
      if (InputValue.length>14) { 
        Classkeep.style.color='red'
        IfHidden.style.display='block'
        this.InputStyle=true
        InputClass.style.backgroundColor ='#fff2f4'
        InputClass.style.borderColor='#e51314'
        this.thirdValue=true
        // 传递值给third.vue
      }else{
          IfHidden.style.display='none'
          this.InputStyle=false
          InputClass.style.backgroundColor ='#fff'
          InputClass.style.borderColor='#8d8d91'
          this.thirdValue=false
      }
      // 传递input框的值给third
      bus.$emit('CurrentInput',InputValue)
      // 清空输入框里面的所有内容
      if (vlaue == "button") {
        InputClass.focus();
        document.getElementById("ChangeStyle").value = "";
         var IfHidden =document.getElementById('Ifdisplay')
        IfHidden.style.display = "none";
        // 下面的是判断str的值为不为空值，才展示
        str=''
        // 点击之后没有焦点，重新获取焦点
        // 调用函数
        ButtonID.style.display = "none";
        // 使其样式保持不变
        if (Classkeep.classList.contains("second-focus")){
        Classkeep.classList.remove("second-focus");
        Classkeep.classList.add("third-focus");
        }
        
        // 点击之后清空所有的数组
        bus.$emit('CleanAll',this.Pandid)
        this.currentValue=[]
        this.ArrayValue=[]
        // 点击之后将输入框的值清空
        
      }
        if (str == "" || str == undefined || str == null) {
        // 当输入框为控制的时候去除button样式
        ButtonID.style.display = "none";
      } else {
        ButtonID.style.display = "block";
      }
     
      if (vlaue=='anxia') {
      this.currentValue=[]
      this.currentValue.push(InputValue)
      // 传递新建的数据
      bus.$emit('currentValue',this.currentValue)
      }
    },
  },
  // 监听值的变化
  watch:{
    ArrayValue(current,prev){
      // 去除数组之间的逗号
      var Classkeep =this.$refs["remainStyle"];
      var InputClass = this.$refs["ChangeStyle"];
      var ButtonID = document.getElementById("buttonlink");
      setTimeout(() => {
        InputClass.focus();
        if (Classkeep.classList.contains("second-focus" )){
        Classkeep.classList.remove("second-focus" );
        Classkeep.classList.add("third-focus");
        }
        else if (Classkeep.classList.contains("Once-focus")){
        Classkeep.classList.remove("Once-focus");
        Classkeep.classList.add("third-focus");
        }
      }, 20);
      // this.SpanUp()
      var layerlist=current.join('')
      // 给输入框赋值
      this.$refs["ChangeStyle"].value=layerlist;
      if (layerlist.length>1) {
        ButtonID.style.display = "block";
      }
    },
    // 监听传递给third的值是否变化
  }
};
</script>

<style lang="less" scoped>
@keyframes Spanup {
  0% {
    
    position: absolute;
    font-size: 17px;
    font-weight: 400;
    color: #8d8d91;
    top: 17px;
    left: 15px;
  }
  100% {
    position: absolute;
    font-size: 12px;
    top: 8px;
    font-weight: 400;
    color: #8d8d91;
    text-align: left;
  }
}
@keyframes SpanupTwo {
  0% {
    position: absolute;
    font-size: 12px;
    top: 8px;
    font-weight: 400;
    color: #8d8d91;
    text-align: left;
  }
  100% {
    position: absolute;
    font-size: 17px;
    font-weight: 400;
    color: #8d8d91;
    top: 17px;
    left: 15px;
  }
}
.rf-engraving-content {
  .rf-engraving-form {
    height: 70px;
    width: 490px;
    padding-bottom: 35px;
    .rf-engraving-messagebox {
      height: 296px;
      width: 490px;
      margin-top: 14px;
      .form-textbox {
        position: relative;
        width: 100%;
        height: 70px;
        .form-textbox-input {
          width: 100%;
          height: 56px;
          margin-bottom: 0.82353rem;
          padding: 18px 49px 0 16px;
          border: 1px solid #8d8d91;
          border-radius: 12px;
          // border-color: #d2d2d7;
          outline: none;
          background-color: #fff;
        }
        // 有焦点之后产生样式
        .form-textbox-input:focus {
          width: 100%;
          height: 56px;
          margin-bottom: 0.82353rem;
          padding: 18px 49px 0 16px;
          border: 2px solid #0071e3;
          border-radius: 12px;
          //  设置的具体属性大于模糊设定的属性
          // border-color: #d2d2d7;
          outline: none;
          box-shadow: 0 0 0 4px #64affb;
        }
        // .textbox-input{

        // }
        .Once-focus {
          position: absolute;
          pointer-events: none !important;
          display: block;
          font-size: 17px;
          font-weight: 400;
          color: #8d8d91;
          text-align: left;
          top: 17px;
          left: 15px;
        }
        .second-focus {
          position: absolute;
          display: block;
          left: 15px;
          animation-play-state: running;
          animation-duration: 0.125s;
          animation-iteration-count: 1;
          animation-name: SpanupTwo;
          animation-fill-mode: forwards;
          // animation-direction: reverse;
        }
        .third-focus {
          animation-play-state: running;
          position: absolute;
          display: block;
          left: 15px;
          animation-duration: 0.125s;
          animation-iteration-count: 1;
          animation-name: Spanup;
          animation-fill-mode: forwards;
          pointer-events: none !important;
        }
        .form-textbox-righticon {
          height: 13px;
          position: absolute;
          top: 20px;
          right: 20px;
          button {
            width: 100%;
            border: none;
            background-color: #fff;
            cursor: pointer;
            span{
              display: block;
              height: 13px;
            }
          }
          button:focus{
            width: 100%;
            border: none;
            border-radius: 50%;
            background-color: #fff;
            box-shadow: 0 0 0 4px #64affb;
          }
        }
        .form-message-wrapper{
          position: absolute;
          top: 50px;
          width: 490px;
          height: 16px;
          margin-top: 8px;
          margin-bottom: 12px;
          text-align: left;
          font-size: 10px;
          color: red;
          display: flex;
          align-items: center;
        }
      }
    }
  }
}
</style>